<template>
  <div id="app">
    <router-view/> <!-- Vue Router 的占位符，用于渲染匹配的视图组件 -->
  </div>
</template>

<script>
// 导出一个 Vue 组件
export default {
  name: 'App', // 组件名称
  components: {
    // 可以在这里注册其他子组件，但当前为空
  },
  data() {
    return {
      // 从 sessionStorage 中获取当前用户信息，并解析为对象
      user: JSON.parse(sessionStorage.getItem('CurUser')),
    }
  },
  // 观察动态路由，当 $store.state.menu 发生变化时执行处理
  watch: {
    '$store.state.menu': {
      handler(val, old) {
        // 当 old 为 false，并且用户信息有效时，将新的菜单值提交到 Vuex
        if (!old && this.user && this.user.num) {
          this.$store.commit("setMenu", val); // 提交 mutation，更新菜单状态
        }
      },
      immediate: true // 立即执行 handler 以便在组件创建时监控
    }
  }
}
</script>

<style>
/* 样式部分 */
#app {
  height: 100%; /* 确保 #app 的高度为 100% */
}

/* 设定菜单项在获得焦点或悬停时的背景颜色 */
.el-menu-item:focus, .el-menu-item:hover {
  background-color: #062a50 !important; /* 使用重要标记以覆盖默认样式 */
}
</style>